<template>
	<view class="article-list flex-c">
		<view class="article flex-c mb20" v-for="(article, index) in list" :key="index" @tap="goDetail(article, index)">
			<!-- 内容主体 -->
			<view class="body-info flex-r ac jsb" :class="{'have-img': article.imageUrl && article.type == 6}">
				<view class="body-left" :class="article.type == 6 ? 'flex-c' : 'flex-r ac'">
					<!-- 标题 -->
					<view class="article-title text-hidden two">
						<text class="text-primary">{{article.title}}</text>
					</view>
					<template v-if="article.type == 6">
						<!-- 话题贴参与人数 -->
						<view class="join-info text-small flex-r ac" v-if="article.participateAvatar && article.participateAvatar[0]">
							<view class="join-user flex-r ac">
								<lazy-image
									v-for="(avatar, index) in article.participateAvatar.slice(0, 5)"
									:key="index" 
									class="user-avatar border-round" 
									:style="'z-index: '+(5-index)+';left:'+(index*32)+'rpx;'" 
									:src="avatar+'?imageView2/1/w/100/h/100/q/50'" 
									type="user"
									fit="cover"
								></lazy-image>
							</view>
							<text class="color-red">{{article.participateNum}}</text>
							<text>人已参与</text>
						</view>
						<!-- 发布时间 -->
						<view class="date-info color-grey flex-r ac text-info">
							<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
							{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
						</view>
					</template>
				</view>
				<!-- 话题贴缩略图 -->
				<view class="body-right" v-if="article.type == 6 && article.imageUrl">
					<lazy-image class="thumb-img inheritwh" :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'" fit="cover"></lazy-image>
				</view>
			</view>
			<!-- 投票贴缩略图 -->
			<view class="article-image flex-r" v-if="article.type == 7 && article.imageUrl" :class="{'big-image': article.imageUrl.split(',').length == 1}">
				<lazy-image :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'" fit="cover" v-if="article.imageUrl.split(',').length == 1"></lazy-image>
				<template v-else>
					<lazy-image v-for="(img, index) in article.imageUrl.split(',').slice(0, 3)" :src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index" fit="cover"></lazy-image>
				</template>
			</view>
			<!-- 方案比赛信息 -->
			<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList" class="match-info"></ArticleMatch>
			<!-- 投票信息 -->
			<view class="vote-info" v-if="article.discussOption && article.discussOption[0]">
				<view class="vote-other flex-c ac">
					<template v-for="(vote, index) in article.discussOption">
						<view class="vote-item flex-r ac jsb text-small" :class="{'active': vote.voteFlag}" :key="index" @tap.stop="voteSubmit(article, index)">
							<view class="progress" :style="'width:' + (article.participateNum ? vote.voteNum / article.participateNum * 100 : 0) + '%;'"></view>
							<text class="text-hidden">{{vote.title}}</text>
							<text>{{vote.voteNum}}</text>
						</view>
					</template>
				</view>
			</view>
			<!-- 底部其他信息 -->
			<view class="read-info text-info flex-r ac jsb" v-if="article.type != 6">
				<view class="color-grey flex-r ac">
					<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
					{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
				</view>
				<text class="color-red" v-if="article.matchInfoList">免费</text>
			</view>
			<!-- 球吧信息 -->
			<view class="bar-info flex-r ac">
				<!-- <view class="info-left flex-r ac" v-if="article.forumId" @tap.stop="$CHS.goBarHome(article.forumId, article.blacklist)">
					<lazy-image class="bar-img border-round" :src="article.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
					<text class="text-secondary">{{article.forumName}}</text>
				</view> -->
				<view class="info-right flex-r ac">
					<image class="comment-icon" src="@/public/images/bar/comment.png" mode="aspectFit"></image>
					<text class="text-small">{{article.commentNum || 0}}</text>
					<image class="view-icon" src="@/public/images/bar/views.png" mode="aspectFit"></image>
					<text class="text-small">{{article.virtualReadNum || 0}}</text>
				</view>
			</view>
			<!-- 操作按钮 -->
			<button class="delbtn flex-r ac" type="default" @tap.stop="deleteContent(index, article.id, article.type)">删除</button>
			<!-- 方案结果 -->
			<view class="item-icon" v-if="showResult && article.matchInfoList && article.result">
				<image :src="require('@/public/images/article/res_'+article.result+(article.result == 1 ? '_'+article.matchInfoList.length : '')+'.png')" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * PublishList 发布内容列表
	 * @description 我的发布内容列表，包含方案列表、讨论贴列表
	 * @property {Array} list 内容列表数据
	 * @property {Boolean} showResult 展示方案结果
	 * @example <PublishList :list="list"></PublishList>
	 */
	export default {
		name: "PublishList",
		props: {
			list: {
				type: [Array,Object]
			},
			showResult: {
				type: Boolean,
				default: true
			}
		},
		components: {
			ArticleMatch: () => import("@/components/ch-article/ch-articlematch.vue"),
		},
		computed: {
			articleList() {
				return this.list
			}
		},
		methods: {
			/**
			 * @description 进入内容详情
			 * @param {object} article 内容对象
			 * @param {number} index 索引
			 */
			goDetail(article, index) {
				//更新阅读数据
				uni.$once('readNum', (data)=>{
					this.articleList[index].virtualReadNum = data.num
				})
				let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: 'user'}
				if(article.matchInfoList) {//方案
					this.$CHS.goArticleDetail(article.id, params)
				}else if(article.type == 2){//晒单
					this.$CHS.goShareDetail(article.id, params)
				}else if(article.type == 6 || article.type == 7){//讨论帖
					this.$CHS.goDiscussDetail(article.id, params)
				}
			},
			/**
			 * @description 提交投票
			 * @param {object} article 内容对象
			 * @param {number} index 索引
			 */
			voteSubmit(article, index) {
				if(this.isSubmit){
					return
				}
				let vote = article.discussOption
				let status = vote.every(item => !item.voteFlag)
				if(status){//未投票
					this.isSubmit = true
					this.$http.post({
						url: '/api/chtyForumDiscussRecord/add',
						data: {
							id: vote[index].id,
							status: 1
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$ShowToast({text: data.message || '投票成功', type: 1})
							article.participateNum = article.participateNum + 1
							vote[index].voteFlag = true
							vote[index].voteNum = Number(vote[index].voteNum) + 1
						}else{
							this.$ShowToast({text: data.message || '投票失败，请稍后重试', type: 2})
						}
					}).finally(()=>{
						this.isSubmit = false
					})
				}else{//已投票
					let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType}
					this.$CHS.goDiscussDetail(article.id, params)
				}
			},
			//删除内容
			deleteContent(index, articleId, type){
				uni.showModal({
					title: '删除内容',
					content: '确认要删除当前发布内容吗？',
					confirmText: '确认',
					confirmColor: '#0055FF',
					success: (res) => {
						if(res.confirm){
							let params = {}
							if(type == 6 || type == 7){
								params = {
									url: '/api/dynamic/delete',
									data: {
										dynamicId: articleId
									}
								}
							}else{
								params = {
									url: '/api/user/article/delete',
									data: {
										id: articleId
									}
								}
							}
							this.$http.post(params).then(data => {
								if(data.success){
									this.articleList.splice(index, 1);
									uni.showToast({
										title: data.message || '删除成功',
										icon: 'success'
									})
								}else{
									uni.showToast({
										title: data.message,
										icon: 'none'
									})
								}
							}).catch((err) => {
								console.log(err);
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-list{
		padding: 0 20rpx;
		.article{
			position: relative;
			padding: 20rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			.body-info{
				margin-top: 15rpx;
				&.have-img{
					margin-top: 30rpx;
					.body-left{
						min-height: 180rpx;
						justify-content: space-between;
					}
				}
				.body-left{
					position: relative;
					.article-title{
						line-height: 42rpx;
						word-break: break-all;
						.text-primary{
							font-weight: 500;
						}
					}
					.card-free{
						position: absolute;
						right: 0;
						width: 83rpx;
						height: 82rpx;
						z-index: 1;
					}
					.join-info{
						margin-top: 8rpx;
						.join-user{
							flex: 2;
							position: relative;
							height: 56rpx;
							.user-avatar{
								width: 56rpx;
								height: 56rpx;
								border: 4rpx solid #FFFFFF;
								box-sizing: border-box;
								position: absolute;
							}
						}
						.color-red{
							margin-right: 10rpx;
						}
					}
					.date-info{
						margin-top: 14rpx;
					}
				}
				.body-right{
					margin-left: 30rpx;
					width: 240rpx;
					height: 180rpx;
					.thumb-img{
						border-radius: 10rpx;
					}
				}
			}
			.article-image{
				flex-wrap: wrap;
				margin-top: 15rpx;
				.lazy-image{
					width: 218rpx;
					height: 164rpx;
					border-radius: 8rpx;
					margin-right: 8rpx; 
				}
				.lazy-image:nth-child(3){
					margin-right: 0;
				}
				&.big-image{
					.lazy-image{
						width: 670rpx;
						height: 376rpx;
						border-radius: 10rpx;
						margin-right: 0;
					}
				}
			}
			.match-info{
				margin-top: 20rpx;
			}
			.vote-info{
				.vote-other{
					.vote-item{
						margin-top: 10rpx;
						width: 100%;
						height: 60rpx;
						background: #FFFFFF;
						border: 1rpx solid #999999;
						border-radius: 30rpx;
						box-sizing: border-box;
						padding: 0 40rpx;
						position: relative;
						overflow: hidden;
						.progress{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							background: #F2F2F2;
							z-index: 1;
						}
						text{
							z-index: 2;
						}
						&.active{
							border: 1rpx solid #0055FF;
							color: #0055FF;
							.progress{
								background: #E5EFFF;
							}
						}
						.text-hidden{
							max-width: 550rpx;
						}
					}
				}
			}
			.read-info{
				margin-top: 15rpx;
				.views{
					flex: 2;
					margin-left: 20rpx;
				}
			}
			.bar-info{
				margin-top: 25rpx;
				padding: 16rpx 0;
				border-top: 1rpx solid #EDEDED;
				border-bottom: 1rpx solid #EDEDED;
				.info-left{
					flex: 1;
					justify-content: flex-start;
					.bar-img{
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
					.text-secondary{
						flex: 2;
					}
				}
				.info-right{
					flex: 2;
					justify-content: flex-end;
					.comment-icon, .view-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.view-icon{
						margin-left: 40rpx;
					}
				}
			}
			.delbtn{
				align-self: flex-end;
				height: 60rpx;
				padding: 0 36rpx;
				background: #FFFFFF;
				border: 1rpx solid #999999;
				border-radius: 30rpx;
				box-sizing: border-box;
				margin: 18rpx 0 0 0;
				font-size: 24rpx;
				color: #666666;
			}
			.item-icon{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10000;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.article:last-child{
			margin-bottom: 20rpx;
		}
		&.border{
			.article{
				border-bottom: 1rpx solid #EDEDED;;
			}
			.article:last-child{
				border: none;
			}
		}
	}
</style>
